<template>
  <div class="more-box" :class="{'open':isOpen}" :style="{'max-height':maxHeight+'px'}">
    <slot />
    <span style="display: inline-block; width:28px;" />
    <el-link type="primary" class="btn-more" @click="open()">
      <span v-if="!isOpen">&gt;&gt;</span>
      <span v-else>收起</span>
    </el-link>
  </div>
</template>

<script>

export default {
  props: {
    maxHeight: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      isOpen: false
      // maxHeight:undefined,
    }
  },

  mounted() {
    if (this.$el.clientHeight >= this.$el.scrollHeight) {
      this.isOpen = true
    }
  },
  methods: {
    open() {
      this.isOpen = !this.isOpen // true;
    }
  }
}
</script>

<style lang="scss" scoped>
.more-box {
    position: relative;
    &.open {
        max-height: none !important;
        // .btn-more {
        //     display: none;
        // }
    }

    .btn-more {
        position: absolute;
        display: block;
        bottom: 1px;
        right: 1px;
        z-index: 10;
        background-color: #fff;
    }
}
</style>
